export default `
## 1 前言

> 面试中的安全问题，明确来说，就两个方面：

- \`CSRF\`：基本概念、攻击方式、防御措施
- \`XSS\`：基本概念、攻击方式、防御措施

> 这两个问题，一般不会问太难。

> 有人问：\`SQL\`注入算吗？答案：这个其实跟前端的关系不是很大。


## 2 CSRF

> 问的不难，一般问：

- \`CSRF\`的基本概念、缩写、全称
- 攻击原理
- 防御措施

> 如果把**攻击原理**和**防御措施**掌握好，基本没什么问题。


### 2.1 CSRF的基本概念、缩写、全称

> \`CSRF\`（\`Cross-site request forgery\`）：**跨站请求伪造**。

PS：中文名一定要记住。英文全称，如果记不住也拉倒。


### 2.2 CSRF的攻击原理

![](http://img.smyhvae.com/20180307_1735.png)

> 用户是网站A的注册用户，且登录进去，于是网站A就给用户下发\`cookie\`。

> 从上图可以看出，要完成一次\`CSRF\`攻击，受害者必须满足两个必要的条件：

1. 登录受信任网站\`A\`，并在本地生成\`Cookie\`。（如果用户没有登录网站\`A\`，那么网站\`B\`在诱导的时候，请求网站\`A\`的\`api\`接口时，会提示你登录）
2. 在不登出\`A\`的情况下，访问危险网站\`B\`（其实是利用了网站\`A\`的漏洞）。

> 我们在讲\`CSRF\`时，一定要把上面的两点说清楚。

> 温馨提示一下，\`cookie\`保证了用户可以处于登录状态，但网站\`B\`其实拿不到 \`cookie\`。

> 举个例子，前段时间里，微博网站有个\`api\`接口有漏洞，导致很多用户的粉丝暴增。

### 2.3 CSRF如何防御

**方法一、Token 验证：**（用的最多）

1. 服务器发送给客户端一个\`token\`；
2. 客户端提交的表单中带着这个\`token\`。
3. 如果这个 \`token\` 不合法，那么服务器拒绝这个请求。


**方法二：隐藏令牌：**

- 把 \`token\` 隐藏在 \`http\` 的 \`head\`头中。

> 方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。


**方法三、Referer 验证：**

> \`Referer\` 指的是页面请求来源。意思是，**只接受本站的请求，服务器才做响应**；如果不是，就拦截。


## 3 XSS

### 3.1 XSS的基本概念

> \`XSS（Cross Site Scripting）\`\`：**跨域脚本攻击**。

- 接下来，我们详细讲一下 \`XSS\` 的内容。

> 预备知识：\`HTTP\`、\`Cookie\`、\`Ajax\`。

### 3.2 XSS的攻击原理

> \`XSS\`攻击的核心原理是：不需要你做任何的登录认证，它会通过合法的操作（比如在\`url\`中输入、在评论框中输入），向你的页面注入脚本（可能是\`js\`、\`hmtl\`代码块等）。

> 最后导致的结果可能是：

- 盗用\`Cookie\`
- 破坏页面的正常结构，插入广告等恶意内容
- \`D-doss\`攻击

### 3.3 XSS的攻击方式

1. 反射型

> 发出请求时，\`XSS\`代码出现在\`url\`中，作为输入提交到服务器端，服务器端解析后响应，\`XSS\`代码随响应内容一起传回给浏览器，最后浏览器解析执行\`XSS\`代码。这个过程像一次反射，所以叫反射型\`XSS\`。

2. 存储型

> 存储型\`XSS\`和反射型\`XSS\`的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求时目标页面时不用再提交XSS代码。

### 3.4 XSS的防范措施（encode + 过滤）

**XSS的防范措施主要有三个：**

**1. 编码**：

> 对用户输入的数据进行\`HTML Entity\`编码。

如上图所示，把字符转换成 转义字符。


> \`Encode\`的作用是将\`$var\`等一些字符进行转化，使得浏览器在最终输出结果上是一样的。

比如说这段代码：

\`\`\`html
<script>alert(1)</script>
\`\`\`

> 若不进行任何处理，则浏览器会执行alert的js操作，实现XSS注入。

> 进行编码处理之后，L在浏览器中的显示结果就是\`<script>alert(1)</script>\`，实现了将\`\`$var\`作为纯文本进行输出，且不引起J\`avaScript\`的执行。


**2、过滤：**

- 移除用户输入的和事件相关的属性。如\`onerror\`可以自动触发攻击，还有\`onclick\`等。（总而言是，过滤掉一些不安全的内容）
- 移除用户输入的\`Style\`节点、\`Script\`节点、\`Iframe\`节点。（尤其是\`Script\`节点，它可是支持跨域的呀，一定要移除）。

**3、校正**

- 避免直接对\`HTML Entity\`进行解码。
- 使用\`DOM Parse\`转换，校正不配对的\`DOM\`标签。

> 备注：我们应该去了解一下\`DOM Parse\`这个概念，它的作用是把文本解析成\`DOM\`结构。


比较常用的做法是，通过第一步的编码转成文本，然后第三步转成\`DOM\`对象，然后经过第二步的过滤。

**还有一种简洁的答案：**

首先是encode，如果是富文本，就白名单。


## 4 CSRF 和 XSS 的区别

> 面试官还可能喜欢问二者的区别。

**区别一：**

- \`CSRF\`：需要用户先登录网站\`A\`，获取 \`cookie\`
- \`XSS\`：不需要登录。


**区别二：（原理的区别）**

- \`CSRF\`：是利用网站\`A\`本身的漏洞，去请求网站\`A\`的\`api\`。
- \`XSS\`：是向网站 \`A\` 注入 \`JS\`代码，然后执行 \`JS\` 里的代码，篡改网站\`A\`的内容。
`;
